<!--
 * @Author: weidewei
 * @Date: 2025-05-14 16:50:03
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-14 18:18:23
 * @Description: 
 * @FilePath: \2025-front-face\vue\vue2\v2\src\components\TestEventBusComp.vue
-->
<template>
  <div>
    <button @click="handleEmitEventBus">触发事件总线</button>
    <h3>事件总线获取到的数据：{{ eventBusData }}</h3>
  </div>
</template>
<script>
export default {
  /**
     * 父子生命周期的顺序：
     * ---创建时期
     * 1.父beforeCreate
     * 2.父create
     * 3.父beforeMount
     * 4.子beforeCreate
     * 5.子created
     * 6.子beforeMount
     * 7.子mounted
     * 8.父mounted
     * ------更新时期
     * 9.父beforeUpdate
     * 10.子beforeUpdate
     * 11.子update
     * 12.父update
     * -----销毁时期
     * 13.父beforeDestory
     * 14.子beforeDestory
     * 15.子destoryed
     * 16.父destoryed
     * 
     * 把组件生命周期比作 「造房子」：

            创建阶段：

            父组件是总承包商（先签合同、准备资金）

            子组件是施工队（后进场施工，先完成装修）

            更新阶段：

            父组件发现设计变更（先通知）

            子组件修改具体施工（先完成修改）

            销毁阶段：

            父组件决定拆楼（先准备拆除手续）

            子组件先拆除内部结构（先完成拆除）
     * 
     */
  data() {
    return {};
  },
  props: ["eventBusData"],
  beforeCreate() {},
  created() {
    console.log("子组件：created");
  },
  beforeMount() {
    console.log("子组件：beforeMount");
  },
  mounted() {
    console.log("子组件：mounted");
  },
  beforeUpdate() {
    console.log("子组件：beforeUpdate");
  },
  updated() {
    console.log("子组件：updated");
  },
  beforeDestroy() {
    console.log("子组件：beforeDestroy");
  },
  destroyed() {
    console.log("子组件：destroyed");
  },
  methods: {
    handleEmitEventBus() {
      this.$eventBus.$emit("getEventBusData", {
        name: "正三",
        age: Math.floor(Math.random() * 50 + 1),
      });
    },
  },
};
</script>
